<template>
  <div class="Income" ref="homePage">
    <div class="bj">
      <van-nav-bar title="我的收益" left-arrow @click-left="onClickLeft" />
    </div>
    <div style="width: 100%;height: 46px;"></div>
    <div v-show="isData" class="wudingdan">
      <van-icon name="description" />
      <p>亲,暂无相关数据哦</p>
    </div>
    <div class="incomeContent">
      <div class="title">
        <span class="titleName">我的收益 </span>
        <span class="incomeDetail-btn" @click="incomeDetail()">收益明细</span>
      </div>
      <div class="icContent">
        <div class="ictop">
          <span class="total"> <i class="lb">累计收益</i> {{totalCount}}</span>
          <van-button class="txBtn" size="small" plain type="primary" @click="withDraw()">提现</van-button>
        </div>
        <p class="icBottom">
          <span class="todayIncome"><i class="lb">今日收益</i> {{todayCount}}</span>
          <span class="todayIncome"><i class="lb">预计收益</i> {{expectCount}}</span>
        </p>
      </div>
    </div>
    <!-- incomeContent end -->
    <div class="orderContent">
      <div class="title">
        <span class="titleName">我的订单{{ $store.state.userInfo.uisReal}}</span>
      </div>
      <div class="icContent">
        <div class="ictop">
          <span class="total"> <i class="lb">累计订单</i> {{orderTotalCount}}</span>
        </div>
        <p class="icBottom">
          <span class="todayIncome"> <i class="lb">今日订单</i> {{orderTodayCount}}</span>
          <span class="todayIncome"><i class="lb">本周订单 </i> {{orderWeekCount}}</span>
        </p>
      </div>
    </div>
    <!-- orderContent end -->
  </div>
</template>

<script>
import { Income, Order, getUserInfoByToken } from '@/api/home.js'
export default {
  data () {
    return {
      uisReals: '', // 认证状态
      clintHeigth: '', // 获取页面高度
      isData: false,
      totalCount: 0, // 总收益
      todayCount: 0, // 今天收益
      expectCount: 1, // 预计收益
      orderTotalCount: 0, // 总订单
      orderTodayCount: 0, // 今天订单
      orderWeekCount: 0 // 预计订单
    }
  },
  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px'
    this.Income()
    this.Order()
    this.getUserInfoByToken()
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    incomeDetail () {
      this.$router.push({
        path: '/Income/IncomeDetail'
      })
    },
    getUserInfoByToken () {

        let data = {}
      getUserInfoByToken(data).then(res => {
        console.log(res)
        if (res.Code === 5 && res.Msg == "请先绑定手机号码") {
          this.$router.push({
            path: "/Login/BindCellphone"
          });
        } else if (res.Code == 0) {
        this.uisReals = 20
        } else {
          Cookies.set('token', '', {
            expires: 7,
            path: '/'
          }) // 设置7天过期
        }

        // if (res.Code == 0) { } else {
        //   Cookies.set('token', '', {
        //     expires: 7,
        //     path: ''
        //   }) // 设置7天过期
        // }
      })
     
    },
    withDraw () {
      console.log(this.uisReals)
      if (this.uisReals === 20) {
        this.$router.push({
          path: '/Withdraw/Withdraw'
        })
      } else if (this.uisReals === null || this.uisReals === 0) {
        this.$toast('未认证')
        setTimeout(() => {
          this.$router.push({
            path: '/Authentication/Authentication'
          })
        }, 3000)
      } else if (this.uisReals === 10) {
        this.$toast('认证中')
      } else if (this.uisReals === 90) {
        this.$toast('认证失败')
      }
    },
    Income () {
      let that = this
      let data = {}
      Income(data).then(res => {
        if (res.code === 0) {
          that.totalCount = res.data.TotalCount
          that.todayCount = res.data.TodayCount
          that.expectCount = res.data.ExpectCount
          that.isData = false
        } else {
          that.isData = true
        }
      })
    },
    Order () {
      let that = this
      let data = {}
      Order(data).then(res => {
        console.log(res)
        if (res.code === 0) {
          that.orderTotalCount = res.data.TotalCount
          that.orderTodayCount = res.data.TodayCount
          that.orderWeekCount = res.data.WeekCount
          that.isData = false
        } else {
          that.isData = true
        }
      })
    }
  },
  computed: {
  }
}
</script>

<style lang="scss" scoped>
.Income {
  .bj {
    .van-icon {
      color: white !important;
    }
  }
  .title {
    position: relative;
    height: 32px;
    .titleName {
      font-weight: 600;
    }
    .incomeDetail-btn {
      position: absolute;
      right: 0;
      color: #fff;
      background: #2eb0ac;
      padding: 5px 15px;
      border-radius: 25px;
    }
  }
  .icContent .ictop {
    position: relative;
    text-align: center;
    font-size: 20px;
    padding: 35px 15px;
    .txBtn {
      border: 1px solid #2cafab;
      color: #2eb0ac;
      text-align: center;
      position: absolute;
      right: 0;
    }
    .total {
      font-size: 24px;
      color: #000;
      .lb {
        font-size: 14px;
        color: #999;
        font-style: normal;
        padding-right: 10px;
      }
    }
  }
  .icContent .icBottom {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    .todayIncome i.lb {
      font-style: normal;
      color: #818181;
      font-size: 14px;
    }
  }
  .incomeContent {
    background: #fff;
    border-radius: 15px;
    margin: 20px auto 20px;
    width: 94%;
    height: auto;
    padding: 25px 20px;
    font-size: 16px;
    color: rgb(31, 29, 29);
  }
  .orderContent {
    background: #fff;
    border-radius: 15px;
    margin: 0 auto 20px;
    width: 94%;
    height: auto;
    padding: 25px 20px;
    font-size: 16px;
    color: #333;
  }
}
</style>
